<script setup lang='ts'>
import { ref, onMounted, nextTick, watch } from "vue";
import {
  Close,
} from "@element-plus/icons-vue";
const x = ref<number>(0);
const y = ref<number>(0);
const emits = defineEmits(["Closes"])
const prop = defineProps({
  width: {
    type: Number,
    default: 450,
    reqiured: false
  },
  height: {
    type: Number,
    default: 550,
    reqiured: false
  },
  models: {
    type: Boolean,
    default: false,
    reqiured: true
  },
  zIndex: {
    type: Number,
    default: 50,
    reqiured: false
  }
})

function Closes() {
  emits("Closes")
}


watch(prop, newval => {
  if (newval.models) {
    nextTick(() => {
      const dom = document.getElementById('_dialog_model');
      x.value = (dom.clientWidth / 2) - (prop.width / 2);
      y.value = (dom.clientHeight / 2) - (prop.height / 2);
    })
  }
}, { immediate: true, deep: true })
</script>

<template>
  <TransitionGroup name="fade">
    <div class="_dialog" v-if="models" :style="{ 'z-index': zIndex }">
      <div class="_dialog_model" id="_dialog_model">
        <VueDragResizeRotate :parent="true" style="border: 1px solid transparent;" :drag-handle="'._dialog_header'" :x="x"
          :y="y" :w="width" :h="height" class-name="dragclass">
          <div class="_dialog_content" :style="{ 'width': width + 'px', 'height': height + 'px' }">
            <header class="_dialog_header">
              <el-icon class="text-zinc-950 isClose" @click="Closes()">
                <Close />
              </el-icon>
              <slot name="header">
                <!-- 页面头部 -->
              </slot>
            </header>
            <main class="_dialog_main">
              <slot name="main"></slot>
            </main>
            <footer class="_dialog_footer">
              <slot name="footer">
                <!-- 页面底部 -->
              </slot>
            </footer>
          </div>
        </VueDragResizeRotate>
      </div>
    </div>
  </TransitionGroup>
</template>

<style scoped lang="scss">
/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);

}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translate(10px, 0);
}

.isClose {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 10px;
  right: 10px;
  z-index: 15;
  cursor: pointer;
}

._dialog {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 15px;
  // z-index: 50;
  overflow: hidden;
}

._dialog_model {
  display: block;
  background-color: rgba(73, 73, 73, 0.267);
  width: 100%;
  height: 100%;
  position: relative;

}

._dialog_content {
  --head-height-60: 60px;
  --head-height-50: 50px;
  border-radius: 15px;
  background-color: white;
  flex-direction: column;
  position: relative;
  // margin: auto;

  ._dialog_header {
    cursor: move;
    height: var(--head-height-50);
    line-height: var(--head-height-50);
    user-select: none;
  }

  ._dialog_main {
    width: 98%;
    height: calc(100% - 70px);
    margin: 0 auto;
    overflow: auto;
  }

  ._dialog_footer {
    height: fit-content;
    position: relative;
    background-color: white;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
  }
}

:deep(.handle) {
  display: none !important;
}

// :deep(.vue-drag-resize-rotate) {
//   transform: translate(150%, 100%) rotate(0deg);
// }
</style>
